//dianwei
$(document).ready(function() {
	$.ajax({
		url: "dianwei.json",
		type: "get",
		dataType: "json",
		success: function(result) {
			if(result) {
				var data = result.Data;
				var f10 = data.f10
				var f9 = data.f9
				var f8 = data.f8
				var html = '';
				var html1 = '';
				var html2 = '';
				for(var i = 0; i < f10.length; i++) {
					var ip = f10[i].ip;
					var zx = f10[i].zx;
					var value = f10[i].Total;
					var left = f10[i].left;
					var top = f10[i].top;
					html += '<a data-ip="' + ip + '" data-value="' + value + '" data-zx="' + zx + '" class="animated weidenglu" style="position: absolute;left: ' + (left - 20) + 'px;top: ' + (top - 20) + 'px;z-index:3;opacity: 0;" data-s="' + i * 50 + '"></a>'
				}
				$(html).appendTo('#f10');
				for(var i = 0; i < f9.length; i++) {
					var ip = f9[i].ip;
					var zx = f9[i].zx;
					var value = f9[i].Total;
					var left = f9[i].left;
					var top = f9[i].top;
					html1 += '<a data-ip="' + ip + '" data-value="' + value + '" data-zx="' + zx + '" class="animated weidenglu" style="position: absolute;left: ' + (left - 20) + 'px;top: ' + (top - 20) + 'px;z-index:3;opacity: 0;" data-s="' + i * 50 + '"></a>'
				}
				$(html1).appendTo('#f9');
				for(var i = 0; i < f8.length; i++) {
					var ip = f8[i].ip;
					var zx = f8[i].zx;
					var value = f8[i].Total;
					var left = f8[i].left;
					var top = f8[i].top;
					html2 += '<a data-ip="' + ip + '" data-value="' + value + '" data-zx="' + zx + '" class="animated weidenglu" style="position: absolute;left: ' + (left - 20) + 'px;top: ' + (top - 20) + 'px;z-index:3;opacity: 0;" data-s="' + i * 50 + '"></a>'
				}
				$(html2).appendTo('#f8');
			}
		}
	});
})
$(document).ready(function() {
	$.ajax({
		url: "复制 dianwei.json",
		type: "get",
		dataType: "json",
		success: function(result) {
			var data = result.Data;
			var follow8 = data.follow8;
			var follow9 = data.follow9;
			var follow10 = data.follow10;
			var Zxqk8 = follow8.Zxqk;
			var Zxqk9 = follow9.Zxqk;
			var Zxqk10 = follow10.Zxqk;
			var List8 = follow8.List;
			var List9 = follow9.List;
			var List10 = follow10.List;
			for(var i = 0; i < List10.length; i++) {
				var ip = List10[i].Ip;
				var z = '[data-ip="' + ip + '"]';
				var d = List10[i].Status;
				var gh = List10[i].Zxgh;-
				$(z).attr('data-value',gh);
				switch(d) {
					case "1":
						$(z).removeClass('kongxian tonghua zhengli shimang xiuxi weidenglu').addClass('kongxian');
						break;
					case "5":
						$(z).removeClass('kongxian tonghua zhengli shimang xiuxi weidenglu').addClass('tonghua');
						break;
					case "6":
						$(z).removeClass('kongxian tonghua zhengli shimang xiuxi weidenglu').addClass('zhengli');
						break;
					case "7":
						$(z).removeClass('kongxian tonghua zhengli shimang xiuxi weidenglu').addClass('shimang');
						break;
					case "8":
						$(z).removeClass('kongxian tonghua zhengli shimang xiuxi weidenglu').addClass('xiuxi');
						break;
				}
			}
			for(var i = 0; i < List9.length; i++) {
				var ip = List9[i].Ip;
				var z = '[data-ip="' + ip + '"]';
				var d = List9[i].Status;
				var gh = List9[i].Zxgh;
				$(z).attr('data-value',gh);
				switch(d) {
					case "1":
						$(z).removeClass('kongxian tonghua zhengli shimang xiuxi weidenglu').addClass('kongxian');
						break;
					case "5":
						$(z).removeClass('kongxian tonghua zhengli shimang xiuxi weidenglu').addClass('tonghua');
						break;
					case "6":
						$(z).removeClass('kongxian tonghua zhengli shimang xiuxi weidenglu').addClass('zhengli');
						break;
					case "7":
						$(z).removeClass('kongxian tonghua zhengli shimang xiuxi weidenglu').addClass('shimang');
						break;
					case "8":
						$(z).removeClass('kongxian tonghua zhengli shimang xiuxi weidenglu').addClass('xiuxi');
						break;
				}
			}
			for(var i = 0; i < List8.length; i++) {
				var ip = List8[i].Ip;
				var z = '[data-ip="' + ip + '"]';
				var d = List8[i].Status;
				var gh = List8[i].Zxgh;
				$(z).attr('data-value',gh);
				switch(d) {
					case "1":
						$(z).removeClass('kongxian tonghua zhengli shimang xiuxi weidenglu').addClass('kongxian');
						break;
					case "5":
						$(z).removeClass('kongxian tonghua zhengli shimang xiuxi weidenglu').addClass('tonghua');
						break;
					case "6":
						$(z).removeClass('kongxian tonghua zhengli shimang xiuxi weidenglu').addClass('zhengli');
						break;
					case "7":
						$(z).removeClass('kongxian tonghua zhengli shimang xiuxi weidenglu').addClass('shimang');
						break;
					case "8":
						$(z).removeClass('kongxian tonghua zhengli shimang xiuxi weidenglu').addClass('xiuxi');
						break;
				}
			}
			var html = '';
			html += '<div class="box" style="display: none;"><div><img src="img/t9.png" class="animated" data-s="1000" /><p><a>93</a><br />总座席数</p></div><div><img src="img/t10.png" class="animated" data-s="1400" /><p><a>'+Zxqk10.Signin+'</a><br />签到人数</p></div><div><img src="img/t11.png" class="animated" data-s="1200" /><p><a>'+Zxqk10.Calling+'</a><br />通话人数</p></div><div><img src="img/t12.png" class="animated" data-s="1800" /><p><a>'+Number(Zxqk10.Rest)+'</a><br />休息人数</p></div><div><img src="img/t13.png" class="animated" data-s="1600" /><p><a>'+Number(Zxqk10.Busy)+'</a><br />示忙人数</p></div><div><img src="img/t14.png" class="animated" data-s="2200" /><p><a>'+Number(Zxqk10.Free)+'</a><br />空闲人数</p></div><div><img src="img/t15.png" class="animated" data-s="2000" /><p><a>'+Number(Zxqk10.Tidy)+'</a><br />整理人数</p></div><div><img src="img/t16.png" class="animated" data-s="2400" /><p><a>'+Number(Zxqk10.Waiters)+'</a><br />等待人数</p></div></div>'
			html += '<div class="box" style="display: none;"><div><img src="img/t9.png" class="animated" data-s="1000" /><p><a>96</a><br />总座席数</p></div><div><img src="img/t10.png" class="animated" data-s="1400" /><p><a>'+Zxqk9.Signin+'</a><br />签到人数</p></div><div><img src="img/t11.png" class="animated" data-s="1200" /><p><a>'+Zxqk9.Calling+'</a><br />通话人数</p></div><div><img src="img/t12.png" class="animated" data-s="1800" /><p><a>'+Number(Zxqk9.Rest)+'</a><br />休息人数</p></div><div><img src="img/t13.png" class="animated" data-s="1600" /><p><a>'+Number(Zxqk9.Busy)+'</a><br />示忙人数</p></div><div><img src="img/t14.png" class="animated" data-s="2200" /><p><a>'+Number(Zxqk9.Free)+'</a><br />空闲人数</p></div><div><img src="img/t15.png" class="animated" data-s="2000" /><p><a>'+Number(Zxqk9.Tidy)+'</a><br />整理人数</p></div><div><img src="img/t16.png" class="animated" data-s="2400" /><p><a>'+Number(Zxqk9.Waiters)+'</a><br />等待人数</p></div></div>'
			html += '<div class="box" style="display: none;"><div><img src="img/t9.png" class="animated" data-s="1000" /><p><a>75</a><br />总座席数</p></div><div><img src="img/t10.png" class="animated" data-s="1400" /><p><a>'+Zxqk8.Signin+'</a><br />签到人数</p></div><div><img src="img/t11.png" class="animated" data-s="1200" /><p><a>'+Zxqk8.Calling+'</a><br />通话人数</p></div><div><img src="img/t12.png" class="animated" data-s="1800" /><p><a>'+Number(Zxqk8.Rest)+'</a><br />休息人数</p></div><div><img src="img/t13.png" class="animated" data-s="1600" /><p><a>'+Number(Zxqk8.Busy)+'</a><br />示忙人数</p></div><div><img src="img/t14.png" class="animated" data-s="2200" /><p><a>'+Number(Zxqk8.Free)+'</a><br />空闲人数</p></div><div><img src="img/t15.png" class="animated" data-s="2000" /><p><a>'+Number(Zxqk8.Tidy)+'</a><br />整理人数</p></div><div><img src="img/t16.png" class="animated" data-s="2400" /><p><a>'+Number(Zxqk8.Waiters)+'</a><br />等待人数</p></div></div>'
			$('.left-box').html(html)
		}
	});
})




				$('.fold .button1').click(function() {
					$('.left-box .animated').each(function() {
						var othis = $(this);
						var str = 'bounceIn flip';
						var s = parseInt(othis.attr('data-s'));
						setTimeout(function() {
							othis.addClass(str);
						}, s);
						setTimeout(function() {
							othis.removeClass(str);
						}, 3000);
					});
					$('#f10 .animated').each(function() {
						var othis = $(this);
						othis.removeClass('bounceIn');
						var s = parseInt(othis.attr('data-s'));
						setTimeout(function() {
							othis.addClass('bounceIn');
						}, s);
					});
				});
				$('.fold .button2').click(function() {
					$('.left-box .animated').each(function() {
						var othis = $(this);
						var str = 'bounceIn flip';
						var s = parseInt(othis.attr('data-s'));
						setTimeout(function() {
							othis.addClass(str);
						}, s);
						setTimeout(function() {
							othis.removeClass(str);
						}, 3000);
					});
					$('#f9 .animated').each(function() {
						var othis = $(this);
						othis.removeClass('bounceIn');
						var s = parseInt(othis.attr('data-s'));
						setTimeout(function() {
							othis.addClass('bounceIn');
						}, s);
					});
				});
				$('.fold .button3').click(function() {
					$('.left-box .animated').each(function() {
						var othis = $(this);
						var str = 'bounceIn flip';
						var s = parseInt(othis.attr('data-s'));
						setTimeout(function() {
							othis.addClass(str);
						}, s);
						setTimeout(function() {
							othis.removeClass(str);
						}, 3000);
					});
					$('#f8 .animated').each(function() {
						var othis = $(this);
						othis.removeClass('bounceIn');
						var s = parseInt(othis.attr('data-s'));
						setTimeout(function() {
							othis.addClass('bounceIn');
						}, s);
					});
				});
				
				$(function() {
					$('#container .fold div').click(function() {
						$(this).addClass('bgblue').siblings().removeClass('bgblue') //找到“red”类  找到每个div的所有同辈元素  从匹配的元素中删除 'red' 类//
						$('.button-div').eq($(this).index()).show().siblings().hide(); //获取这个匹配的元素 显示它  同类的元素隐藏//
						$('.left-box .box').eq($(this).index()).show().siblings().hide(); //获取这个匹配的元素 显示它  同类的元素隐藏//
						$('.center-box .img-div').addClass('animated fadeOutDown');
						setTimeout(function() {
							$('.center-box .img-div').addClass('none');
						}, 2000);
					})
				})
				$(function() {
					$('#container .button-div').on("click", "a",function() {
						var ah = $(this).hasClass('kongxian');
						var bh = $(this).hasClass('tonghua');
						var ch = $(this).hasClass('zhengli');
						var dh = $(this).hasClass('shimang');
						var eh = $(this).hasClass('xiuxi'); 
						var fh = $(this).hasClass('weidenglu');
						if(ah==true){
						$(this).addClass('ah').siblings().removeClass('ah bh ch dh eh fh') //找到“red”类  找到每个div的所有同辈元素  从匹配的元素中删除 'red' 类//
						}
						if(bh==true){
						$(this).addClass('bh').siblings().removeClass('ah bh ch dh eh fh') //找到“red”类  找到每个div的所有同辈元素  从匹配的元素中删除 'red' 类//
						}
						if(ch==true){
						$(this).addClass('ch').siblings().removeClass('ah bh ch dh eh fh') //找到“red”类  找到每个div的所有同辈元素  从匹配的元素中删除 'red' 类//
						}
						if(dh==true){
						$(this).addClass('dh').siblings().removeClass('ah bh ch dh eh fh') //找到“red”类  找到每个div的所有同辈元素  从匹配的元素中删除 'red' 类//
						}
						if(eh==true){
						$(this).addClass('eh').siblings().removeClass('ah bh ch dh eh fh') //找到“red”类  找到每个div的所有同辈元素  从匹配的元素中删除 'red' 类//
						}
						if(fh==true){
						$(this).addClass('fh').siblings().removeClass('ah bh ch dh eh fh') //找到“red”类  找到每个div的所有同辈元素  从匹配的元素中删除 'red' 类//
						}
						})
				})
				
								$(function() {
					$('#container .button-div').on("click", "a",function() {
						var th = $(this).attr('data-ip');
						var gh = $(this).attr('data-value');
						var zx = $(this).attr('data-zx');
								var brower1 = []; 
								var brower2 = []; 
								var brower3 = []; 
								if(th == '172.18.134.110'){
									$.ajax({
						url: "qushi.json",
						type: "get",
						dataType: "json",
						success: function(result) {
							if(result) {
								var data = result.Data;
								var today = data.today;
								var jietingNum = data.jietingNum;
								var jiaobanNum = data.jiaobanNum;
								var tonghuaTime = data.tonghuaTime;							
								var html = ''
							html += '<div class="top-box"><img src="img/头像.png" /><div class="box"><div class="top"><p><a>坐席工号</a>'+gh+'</p><p>'+zx+'</p></div><div class="bottom"><p><a class="first">'+today.JietingNum+'</a>接听量</p><p><a class="second">'+today.JiaobanNum+'</a>交办量</p><p><a class="third">'+today.TonghuaTime+'m</a>通话时长</p></div></div></div><div class="bottom-box"><div class="bt">趋势分析</div><div id="ech" style="height: 100%;"></div></div>	'
							$('.right-box').html(html);
								for(var i = 0; i < jietingNum.length; i++){
                					brower1.push(jietingNum[i].Value);
                					brower2.push(jiaobanNum[i].Value);
                					brower3.push(tonghuaTime[i].Value);
								}
					var myChart = echarts.init(document.getElementById("ech"));
					data1 = brower1
					data2 = brower2
					data3 = brower3

					option = {
						tooltip: {
							trigger: 'axis', //按x轴显示
							show: true,
							axisPointer: {
								lineStyle: {
									color: 'rgba(255, 255, 255, 0.2)',
								},
							},
							backgroundColor: 'rgba(255, 255, 255, 0.2)',
							textStyle: {
								align: 'left',
								fontSize: 12,
								color: '#fff',
							},
							extraCssText: 'box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.2)' //添加阴影
						},
						color: ['#ffef4e', '#18f5ba', '#37b2f5'],
						grid: {
							left: '10%',
							right: '4%',
							top: '25%',
							bottom: '10%',
						},
						legend: {
							show: true,
							icon: 'circle',
							right: 30,
							textStyle: {
								fontSize: 12,
								color: '#fff'
							},
						},
						xAxis: {
							show: true,
							type: 'category',
							boundaryGap: false,
							axisTick: {
								show: false
							},
							axisLine: {
								show: false,
								lineStyle: {
									color: '#fff',
								}
							},
							axisLabel: {
								fontSize: 16,
							},
							data: (function getDate() {
								var rs = new Date().getYear();
								var ras = new Date().getMonth();
								var res = new Date().getDate() - 16;
								var base = +new Date(rs, ras, res);
								var oneDay = 24 * 3600 * 1000;
								var date = [];
								var data = [Math.random() * 300];
								for(var i = 0; i < 15; i++) {
									var now = new Date(base += oneDay);
									date.push([now.getMonth() + 1, now.getDate()].join('/'));
								}
								return date;
							})()
						},
						yAxis: {
							show: true,
							type: 'value',
							axisTick: {
								show: false
							},
							axisLine: {
								show: false,
								lineStyle: {
									color: 'rgba(104, 179, 255, 0.5)',
								}
							},
							axisLabel: {
								fontSize: 16,
							},
							splitLine: {
								show: true,
								lineStyle: {
									color: 'rgba(40,212,255,0.1)',
									width: 2
								}
							},
							splitArea: {
								show: true,
								areaStyle: {
									color: 'rgba(20,57,118,0.3)'
								}
							}
						},
						series: [{
							name: '通话时长',
							type: 'line',
							symbol: 'none',
							symbol: 'circle',
							symbolSize: 5,
							lineStyle: {
								width: 3,
								type: 'solid',
							},
							data: data1
						}, {
							name: '交办量',
							type: 'line',
							symbol: 'none',
							symbol: 'circle',
							symbolSize: 5,
							lineStyle: {
								width: 3,
								type: 'solid',
							},
							data: data2
						}, {
							name: '接听量',
							type: 'line',
							symbol: 'none',
							symbol: 'circle',
							symbolSize: 5,
							lineStyle: {
								width: 3,
								type: 'solid',
							},
							data: data3
						}]
					};
					if(option && typeof option === "object") {
						myChart.setOption(option, true);
					}
							}
							
							
					}
						
					});
								}
								else{
															
								var html = ''
							html += '<div class="tanhao"><img src="img/tanhao.png" width="150px"/><br /><p>当前坐席未登录</p><br /><p>暂无数据</p></div>';
							$('.right-box').html(html);
							
								}
						
				
					})
				})
